<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%String path = request.getContextPath(); %>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<title>刮刮卡</title>
	<link href="<%=path %>/css/activity-style.css" rel="stylesheet" type="text/css">
	<%-- <link rel="stylesheet" href="<%=path %>/css/jquery.mobile-1.4.0.min.css" /> --%>
	<style type="text/css">
	</style>
	<script src="<%=path %>/js/jquery-1.11.0.min.js"></script>
	<%-- <script src="<%=path %>/js/jquery.mobile-1.4.0.min.js"></script> --%>
	<script src="<%=path %>/js/wScratchPad.js" type="text/javascript"></script>
	<script src="<%=path %>/js/alert.js" type="text/javascript"></script>
	<script type="text/javascript">
		function loading(canvas, options) {
			this.canvas = canvas;
			if (options) {
				this.radius = options.radius || 12;
				this.circleLineWidth = options.circleLineWidth || 4;
				this.circleColor = options.circleColor || 'lightgray';
				this.moveArcColor = options.moveArcColor || 'gray';
			} else {
				this.radius = 12;
				this.circelLineWidth = 4;
				this.circleColor = 'lightgray';
				this.moveArcColor = 'gray';
			}
		}
		loading.prototype = {
			show: function() {
				var canvas = this.canvas;
				if (!canvas.getContext) return;
				if (canvas.__loading) return;
				canvas.__loading = this;
				var ctx = canvas.getContext('2d');
				var radius = this.radius;
				var me = this;
				var rotatorAngle = Math.PI * 1.5;
				var step = Math.PI / 6;
				canvas.loadingInterval = setInterval(function() {
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					var lineWidth = me.circleLineWidth;
					var center = {
						x: canvas.width / 2,
						y: canvas.height / 2
					};

					ctx.beginPath();
					ctx.lineWidth = lineWidth;
					ctx.strokeStyle = me.circleColor;
					ctx.arc(center.x, center.y + 20, radius, 0, Math.PI * 2);
					ctx.closePath();
					ctx.stroke();
					//在圆圈上面画小圆   
					ctx.beginPath();
					ctx.strokeStyle = me.moveArcColor;
					ctx.arc(center.x, center.y + 20, radius, rotatorAngle, rotatorAngle + Math.PI * .45);
					ctx.stroke();
					rotatorAngle += step;

				},
				100);
			},
			hide: function() {
				var canvas = this.canvas;
				canvas.__loading = false;
				if (canvas.loadingInterval) {
					window.clearInterval(canvas.loadingInterval);
				}
				var ctx = canvas.getContext('2d');
				if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
			}
		};
	</script>
</head>
<body class="activity-scratch-card-winning" data-role="page">
	<div class="main">
		<div class="cover">
			<img src="<%=path %>/image/activity/activity-scratch-card-bannerbg.png">
			<div id="prize">
			</div>
			<div id="scratchpad">
			</div>
		</div>
		<div class="content">
			<div id="zjl" style="display:none" class="boxcontent boxwhite">
				<div class="box">
					<div class="title-red">
						<span>
							恭喜你中奖了
						</span>
					</div>
					<div class="Detail">
						<p>
							你中了：
							<span class="red">
								谢谢参与
							</span>
						</p>
						<p>
							兑奖SN码：
							<span class="red" id="sncode">
								null
							</span>
						</p>
						<p class="red"></p>
						<p>
							<input name="" class="px" id="tel" value="" type="text" placeholder="用户请输入您的手机号">
						</p>
						<p>
							<p>
								<input class="pxbtn" name="提 交" id="save-btn" type="button" value="用户提交">
							</p>
							<p>
								<input name="" class="px" id="parssword" type="password" value="" placeholder="商家输入兑奖密码">
							</p>
							<p>
								<input class="pxbtn" name="提 交" id="save-btnn" type="button" value="商家提交">
							</p>
					</div>
				</div>
			</div>
			<div class="boxcontent boxwhite">
				<div class="box">
					<div class="title-brown">
						<span>
							奖项设置：
						</span>
					</div>
					<div class="Detail">
						<c:forEach var="prize" items="${prizeList }"  >
							<p>
							${prize.level }：${prize.name }。奖品数量：${prize.count }
							</p>
						</c:forEach>
						<!-- <p>
							一等奖： 苹果手机8。奖品数量：60
						</p>
						<p>
							二等奖： 苹果手机7 。奖品数量：100
						</p>
						<p>
							三等奖： 苹果手机6 。奖品数量：200
						</p> -->
					</div>
				</div>
			</div>
			<div class="boxcontent boxwhite">
				<div class="box">
					<div class="title-brown">
						活动说明：
					</div>
					<div class="Detail">
						<p class="red">
							本次活动总共可以刮${games.count }次,你已经刮了0次,机会如果没用完重新进入本页面可以再刮!
						</p>
						<p>
							${games.remark }
						</p>
					</div>
				</div>
			</div>
		</div>
		<div style="clear:both;">
		</div>
	</div>
	<script src="index/js/alert.js" type="text/javascript"></script>
	<script type="text/javascript">
		window.sncode = "null";
		window.prize = "谢谢参与";
		var prizeResult = "${prize.level}";

		var zjl = false;
		var num = 0;
		var goon = true;
		$(function() {
			if("${cardFlag}"=='false'){
				alert('请先注册会员才能参加抽奖！3秒后自动跳转到注册页面');
				var time = setTimeout(function(){
					window.location.href = "<%=path%>/card/toAddCard.do?openid=${openid}";
				},3000);
			}
			//注册刮奖组件
			wScratch();
			//查询结果
			if(prizeResult!=null && prizeResult != ''){
				window.prize =prizeResult;
				$("#prize").css('color','red');
			}
			document.getElementById('prize').innerHTML = window.prize;
		});

		function wScratch(){
			$("#scratchpad").wScratchPad({
				width: 150,
				height: 40,
				color: "#a9a9a7",
				scratchMove: function() {
					num++;
				/* 	if (num == 2) {
						document.getElementById('prize').innerHTML = "谢谢参与";
					} */
					if(num==50){
						if(prizeResult==null || prizeResult == ''){
							if(confirm("您未中奖！确定继续刮？")){
								window.location.href = location.href;
							}
						}else{
							alert("您已中"+prizeResult+",虚拟物品将直接发放，实物工作人员会与您联系发放事宜。");
						}
					}

					if (zjl && num > 5 && goon) {
						//$("#zjl").fadeIn();
						goon = false;

						$("#zjl").slideToggle(500);
						//$("#outercont").slideUp(500)
					}
				}
			});
		}
		$("#save-btn").bind("click", function() {
			var btn = $(this);
			var tel = $("#tel").val();
			if (tel == '') {
				alert("请输入手机号");
				return
			}

			var submitData = {
				tid: 438,
				code: $("#sncode").text(),
				tel: tel,
				action: "setTel"
			};
			$.post('index.php?ac=acw', submitData,
			function(data) {
				if (data.success == true) {
					alert(data.msg);
					return
				} else {}
			},
			"json");
		});

		// 保存数据
		$("#save-btnn").bind("click", function() {
			//var btn = $(this);
			var submitData = {
				tid: 438,
				code: $("#sncode").text(),
				parssword: $("#parssword").val(),
				action: "setTel"
			};
			$.post('index.php?ac=acw', submitData,
			function(data) {
				if (data.success == true) {
					alert(data.msg);
					if (data.changed == true) {
						window.location.href = location.href;
					}
					return
				} else {}
			},
			"json");
		});
	</script>
</body>
</html>